<template>
  <view class="container">
    <!-- 背景图片 -->
    <image
      class="background-image"
      :src="require('@/static/images/logo.jpg')"
      mode="aspectFill"
    />
    
    <!-- 底部窗口 -->
	
	<!-- 排队view -->
    <view class="bottom-window" v-if="lineUpStatus">
      <view class="status-container" >
        <view class="status-text-container">
          <text class="status-text">排队中...</text>
		  <view style="margin-top: 10px;"> <text class="waiting-text">司机马上接单了，请您耐心等待...</text></view>
        </view>
        <button class="cancel-button" @click="cancelOrder">取消订单</button>
      </view>
    </view>
	<!-- 订单取消成功弹窗-->
	<view  class="bottom-window"  v-if="closeOrderStatus">
		<view class="closeOrder-container" style="margin-bottom: 10px;">
				<view style="font-size: 20px;font-weight: bold;">订单取消成功</view>
			    <view style="font-size: 12px;margin-top: 5px;">订单已取消，您可以重新打车</view>
				<u-row gutter="10" style="margin: 20px;">
				          <u-col span="12" style="text-align: center;margin: 10px;" >
				            <view class="u-node u-node1" style="margin-top: 12px;margin-right: 10px;float: left;"></view>
				            <view  style="margin-top:7px;"><text>出发地： 大榕树创意产业园</text></view>
				          </u-col>
				          <u-col span="12" style="margin-top: 20px;">
							<view class="u-node u-node2" style="margin-top: 12px;margin-right: 10px;float: left;"></view>
							<view  style="margin-top:7px;"><text>目的地： 宝龙城市广场</text></view>
				          </u-col>
				        </u-row>
		</view>
		<u-button type="success" @click="restartCall">重新打车</u-button>
	</view>
	 <!-- 司机接单界面(在路上) -->
	 	<view  class="bottom-window" >
			<!-- 接客路上 -->
			<view v-if="onRoadStatus">
				<view >
					<text style="font-size: 20px;font-weight: bold;">司机已接单</text>
					<u-button type="success" size="mini" style="float: right;">取消订单</u-button>
				</view>
				<view style="margin-top: 5px;">
					<text>请准时前往上车地点</text>
					<view style="margin-top: 15px;border-bottom: 1px solid #ccc;"></view>
				</view>
			</view>
			<!-- 司机已到地点 -->
				<view v-if="arriveStatus">
								<view>
									<text style="font-size: 20px;font-weight: bold;">司机已到达</text>
									<u-button type="success" size="mini" style="float: right;">取消订单</u-button>
								</view>
								<view style="margin-top: 5px;">
									<text>请准时前往上车地点</text>
								<view style="margin-top: 15px;border-bottom: 1px solid #ccc;"></view>
								</view>
				</view>
				<!-- 费用小窗口 -->
				<view v-if="priceStatus" >
					<view>
						<view style="align-items: center;float: right;" class="price">
							<text>费用明细</text> <text style="margin-left: 10px;"> ></text>
						</view>
					<view>
						<view><text style="font-size: 20px;color:orange">18.00</text><text style="margin-left: 5px;">元</text></view>
						<view style="margin-top: 5px;"><text style="color:orange;font-size: 12px;">已优惠</text><text style="color:orange;margin-left: 10px;font-size:12px">7元</text></view>
					</view>
				</view>
					<view style="margin-top: 15px;border-bottom: 1px solid #ccc;"></view>
				</view>
				<!-- 司机车辆信息窗口 -->
			<view style="margin-top:20px;" v-if="driverInfoWindow">
				<image src="../../static/images/preview.png" style="width: 70px;height:70px;border-radius: 50%;float: left;">
				<view style="float: left;margin-left: 20px;">
					<view>
						<text style="font-size: 20px;font-weight: bold;">粤A.77777</text>
					</view>
					<view style="margin-top: 8px;">
						<text>黑色  </text>    <text style="padding: 10px;">|</text><text> 劳斯莱斯幻影</text>
					</view>
					<view style="margin-top: 8px;">
						<text>胡师傅</text> 
						<u-rate :current="driverLevel" :disabled="true" style="margin-left:10px;"></u-rate>
					</view>
				</view>
				<img src="../../static/images/phone.png" style="width: 50px;height:50px;float:right">
				<view style="float: left;margin-top: 20px;margin-left: 20px;" v-if="priceStatus">
					<u-button type="error" size="medium" @click="callPolice">一键报警</u-button>
					<u-button type="warning" size="medium" style="margin-left: 10px;"  @click="showPopup = true">立即支付</u-button>
				</view>
			</view>
			 <!-- 弹出层  支付费用-->
			    <u-popup v-model="showPopup" mode="bottom" show-close="true" height="52%" >
					<view style="text-align: center;font-size: 18px;margin-top: 10px;">
						待支付金额
					</view>
					<view style="margin-top: 15px;border-bottom: 1px solid #ccc;"></view>
			       <view style="padding: 20px;">
					  <view style="display: flex; justify-content: space-between; align-items: center;">
					    <text style="font-size: 15px;">合计费用</text>
					    <text style="font-size: 15px;">18.00元</text>
					  </view>
					 <view style="margin-top: 10px; display: flex; justify-content: space-between; align-items: center;">
					   <text style="color:orange;font-size: 15px;">优惠卷</text>
					   <text style="color:orange;font-size: 15px;">-10.00元    <text style="margin-left: 10px;"> ></text></text>
					 </view>
					 <view style="margin-top: 15px;border-bottom: 1px solid #ccc;"></view>
					 <view style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
					   <text style="font-size: 25px;color:red;">8.00<text style="margin-left: 5px;font-size: 15px;color:black;">元</text></text>
					   <text style="font-size: 15px;">费用明细 ></text>
					 </view>
					 <view style="margin-top: 25px; display: flex; align-items: center; justify-content: space-between;margin-bottom: 30px;">
					   <image src="../../static/images/zhifubao.png" style="width: 50px; height: 50px; margin-left: 15px;" />
					   <view style="display: flex; align-items: center; flex-grow: 1; justify-content: center;">
					     <text style="font-size: 15px;">支付宝支付</text>
					   </view>
					   <radio group="paymentGroup" value="alipay" style="margin-left: 10px;" checked="true"/>
					 </view>
					 <u-button type="success" @click="restartCall" style="margin-top: 15px;border-radius: 5px;"> 确认支付8.00元</u-button>
				   </view>
			    </u-popup>
				<!-- 评价弹出窗 -->
				 <u-popup v-model="showCommentPopup" mode="bottom" show-close="true" height="52%" >
					 <view style="text-align: center;font-size: 18px;margin-top: 12px;">
					 	评价
					 </view>
					 <view style="margin-top: 12px;border-bottom: 1px solid #ccc;"></view>
					 <view style="display: flex; justify-content: center; align-items: center; margin-left: 10px;margin-top: 20px;">
					   <!-- 设置 <u-rate> 的样式 -->
					   <u-rate :current="userComment" size="50" />
					 </view>
					 <view style="margin: 15px;">
						 <!-- <textarea style="width: 100%;height:150px;border: 1px solid black;"></textarea> -->
						  <textarea 
						       class="commentArea" 
						       maxlength="50" 
						       placeholder='请输入给司机评价内容...'
						       @input="sumfontnum"
							   style="border: 1px solid black;"
							   >
						     </textarea>
						     <text class="text2">{{ fontNum }}/50</text>
					</view>
					 
					 <view style="margin-left: 20px;margin-right: 20px;margin-top: 15px;"><u-button type="success"  style="margin-top: 15px;border-radius: 5px;"> 提交 </u-button></view> 
					 
				 </u-popup>
			
		</view>
		
  </view>
</template>

<script>
export default {
	 data() {  
	    return {  
	      // 排队等待窗口  
	      lineUpStatus: false,  
	      // 取消订单窗口  
	      closeOrderStatus: false,  
		  //司机接单后的大窗口
		  pickUpStatus:true,
		  //司机接单-去出发地路上小窗
		  onRoadStatus:false,
		  //司机接单-到达出发地小窗
		  arriveStatus:false,
		  //司机信息面板
		  driverInfoWindow:true, 
		  // 到达目的地,显示金额 以及支付按钮
		  priceStatus:true,
		  //司机评价星级
		  driverLevel:5,
		  showPopup:false,// 控制支付弹出层显示
		  showCommentPopup:true,
		  userComment:5,
		  fontNum: 0
	    } 
	  }, 
	methods: {
    cancelOrder() {
      // 处理取消订单的逻辑
		
      this.lineUpStatus=false;
	  this.closeOrderStatus=true;
    },
	//一键报警
	callPolice(){
		uni.makePhoneCall({
			 	// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
			    phoneNumber: '18250162470', 
				// 成功回调
				success: (res) => {
					console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
					console.log('调用失败!')
				}
			  })
		},
		//重新叫车
		restartCall(){
			this.closeOrderStatus=false;
			this.lineUpStatus=true
		},
		sumfontnum(e) {
		      this.fontNum = e.detail.value.length;
		    }
  }
}
</script>

<style scoped>
	.commentArea{
		width: 100%;
		  height: 150px;
		  border: 1px solid black;
		  padding: 10px;
		  box-sizing: border-box;
		  font-size: 16px;
		  resize: none; /* 禁止用户调整textarea的大小 */
		  overflow: auto; /* 当内容超出textarea大小时显示滚动条 */
	}
	.price:hover{
		color: red;
	}
.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom-window {
  position: absolute;
  bottom: 30px;
  width: calc(100% - 40px); /* 增加左右间隔 */
  padding: 15px;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 5px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  margin: 0 20px; /* 使底部窗口两边有间隔 */
}


.status-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右对齐 */
}

.status-text-container {
  flex: 1; /* 占据剩余空间 */
  margin-right: 10px; /* 为文本和按钮之间添加间隔 */
}
.closeOrder-container{
	
}
.list-item-content {
  display: flex;
  align-items: center;
}

u-tag {
  margin-right: 5px;
}
.status-text {
  color: #333333; /* 深灰色文字 */
  font-size: 18px; /* 调整字号 */
  font-weight: bold;
}

.waiting-text {
  color: #666666; /* 较浅的灰色文字 */
  font-size: 14px; /* 调整字号 */
}

.cancel-button {
  background-color: #ff4d4f; /* 红色背景 */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 6px 12px; /* 缩小按钮尺寸 */
  font-size: 14px; /* 调整文字大小 */
}

/* 取消订单弹窗样式 */
.u-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f3f3f3;
	}
	
	.u-node1 {
		background-color: #22D78B;
	}
	
	.u-node2 {
		background-color: #FD6749;
	}
</style>
